<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">
				{{groupName}}
			</block>
		</cu-custom>
		<view>
			<view class="bg-white nav">
				<view class="flex text-center common-bar-height">
					<view class="cu-item flex-sub" v-if="isMultiple">
						<view style="height: 60rpx;width: 80rpx;" @tap="choseAll">
							<view v-if="deviceCoreList.length !== deviceList.length" class="text-df">
								<text class="cuIcon-all margin-right-xs"></text>{{$t('all')}}
							</view>
							<view v-else class="text-df">
								<text class="cuIcon-close margin-right-xs"></text>{{$t('deselect')}}
							</view>
						</view>
					</view>
					<view class="cu-item flex-sub">
						<view style="height: 60rpx;width: 80rpx;" @tap="isMultiple = !isMultiple" class="text-df">
							{{$t('multipleChoice')}}
						</view>
					</view>
					<view class="cu-item flex-sub">
						<picker @change="statusChange" :value="statusIndex" :range='statusList' range-key="label">
							<view class="text-df">
								{{ formatStatusIndex(statusIndex).label}}
							</view>
						</picker>
					</view>
					<view class="cu-item flex-sub">
						<picker mode="multiSelector" @change="productAndSeriesChange"
							@columnchange="productAndSeriesColumnchange" :value="productAndSeriesIndex"
							:range='productAndSeriesNameList'>
							<view class="text-df">
								{{productAndSeriesNameList[0][productAndSeriesIndex[0]]}} [
								{{productAndSeriesNameList[1][productAndSeriesIndex[1]]}} ]
							</view>
						</picker>
					</view>
				</view>
			</view>

			<scroll-view scroll-x class="bg-white nav" scroll-with-animation v-if="!showCommonSetting">
				<checkbox-group class="block" @change="changeCheckbox">
					<view v-for="(device,index2) in deviceList" :key="index2" @tap='deviceNavigation(device)'>
						<view class="padding-left-sm padding-right-sm padding-top-sm flex align-center justify-start">
							<image v-if="!isMultiple" style="width: 35px;height: 35px;" :src='device.iconUrl' />
							<view v-else style="width: 35px;height: 35px;" @tap.stop="">
								<checkbox :value="device.deviceCore" :checked="deviceCoreList.includes(device.deviceCore)"
									:class="{'checked':deviceCoreList.includes(device.deviceCore)}"></checkbox>
							</view>
							<view
								class="flex align-center justify-between solid-bottom padding-bottom-sm padding-left-sm"
								style="flex-grow: 1;">
								<view>
									<view class="text-cut text-sm text-gray">
										{{device.deviceName}}
									</view>
									<view :style="{color : themeConfig.primaryColor}"
										class="margin-bottom-xs text-sm margin-top-xs">
										<text v-if="device.warnNum > 0"
											class="cuIcon-infofill text-red margin-right-xs"></text>{{device.deviceCore}}
									</view>
									<view class="text-cut text-gray text-xs">
										{{device.address}}
									</view>
								</view>
								<view>
									<view class="flex justify-center">
										<surplus class="surplus" id="surplus" :status="device.status"
											:charging="device.charging" :surplus="device.surplus">
										</surplus>
										<view style="line-height: 44rpx;"
											:style="{color : device.status === 'ONLINE' ? '#0F0F0F' :'#AAAAAA'}"
											class="text-center text-sm text-gray margin-left-sm">
											{{ formatDeviceStatus(device.status) }}
										</view>
									</view>
									<view class="cuIcon-settingsfill text-right text-lg margin-top-sm margin-right-xs"
										@tap.stop='deviceSetting()'>
									</view>
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>

		<view v-if="isMultiple && !showCommonSetting" @tap="showCommonSetting = true"
			class="flex align-center justify-center" :style="[{backgroundColor:themeConfig.primaryColor}]"
			style="width: 70rpx;height: 70rpx;border-radius: 50%;position:fixed !important;z-index: 1024;right:20rpx;bottom: 140rpx">
			<view class="text-sm cuIcon-settings text-white">
			</view>
		</view>
		
		<view v-if="showCommonSetting">
			<view class="flex align-center justify-center margin" :style="[{backgroundColor:themeConfig.primaryColor}]"
				style="width: 65rpx;height: 65rpx;border-radius: 50%;" @tap="showCommonSetting = false">
				<view class="cuIcon-close text-sm text-white "></view>
			</view>
			<common-setting :deviceCoreList="deviceCoreList">
			</common-setting>
		</view>
	</view>
</template>

<script>
	import {
		listDeviceStatus,
		listProductList,
		listProductSeries,
		formatDeviceStatus
	} from '@/util/utils.js'
	import Surplus from '@/components/ztn-custom/Surplus/index.vue'
	import *
	as deviceBelongApi from '@/api/iot/iotDeviceBelongApi.js'
	import * as iotProductApi from '@/api/iot/iotProductApi.js'
	import * as iotProductSeriesApi from '@/api/iot/iotProductSeriesApi.js'
	import * as iotProductUserApi from '@/api/iot/iotProductUserApi.js'
	import * as iotProductSeriesUserApi from '@/api/iot/iotProductSeriesUserApi.js'
	import CommonSetting from '@/components/ztn-custom/CommonSetting/index.vue'
	import * as storage from '@/util/storage.js'
	export default {
		data() {
			return {
				groupId: null,
				groupName: '',
				statusIndex: 0,
				statusList: [],
				deviceList: [],
				productList: [],
				productSeriesList: [],
				productAndSeriesList: [
					[],
					[]
				],
				productAndSeriesNameList: [
					[],
					[]
				],
				productAndSeriesIndex: [0, 0],
				isMultiple: false,
				deviceCoreList: [],
				showCommonSetting: false,
				userId: storage.getUserId(),
				productId: null,
				seriesId: null,
			}
		},
		components: {
			Surplus,
			CommonSetting
		},
		onLoad(option) {
			this.groupId = option.groupId
			if (option.groupName) {
				this.groupName = option.groupName
			}
			this.init()
			this.listDevice()
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		methods: {
			formatDeviceStatus(status) {
				return formatDeviceStatus(this, status)
			},
			choseAll() {
				const deviceCoreList = []
				if (this.deviceCoreList.length !== this.deviceList.length) {
					this.deviceList.forEach(device => {
						deviceCoreList.push(device.deviceCore)
					})
				}
				this.deviceCoreList = deviceCoreList
			},
			changeCheckbox(e) {
				this.deviceCoreList = e.detail.value
			},
			init() {
				this.statusList = listDeviceStatus(this)
				this.statusIndex = storage.getStatusIndex()
				this.listProductAndSeries().then(res => {
					this.productAndSeriesList = [this.productList, this.productSeriesList]
					const index = this.productList.findIndex((item) => item.productId === this.productId)
					this.productAndSeriesIndex = [index, 0]
				})
			},
			statusChange(e) {
				this.statusIndex = e.detail.value
				storage.setStatusIndex(this.statusIndex)
				this.listDevice()
			},
			listProductAndSeries: async function() {
				let api
				switch (this.websiteModel) {
					case 'system':
					case 'company':
					case 'dept':
						api = iotProductApi.listProduct({})
						break
					default:
						api = iotProductUserApi.listProduct({
							userId: this.userId
						})
				}

				await api.then((res) => {
					const {
						data
					} = res
					if (data) {
						this.productList = listProductList(this, data)
					}
				})
				if (this.productId) {
					await this.listSeries();
				} else {
					this.handleProductSeriesList([])
				}
			},
			listSeries() {
				return new Promise((resolve, reject) => {
					let api
					switch (this.websiteModel) {
						case 'system':
						case 'company':
						case 'dept':
							api = iotProductSeriesApi.listSeries({
								productId: this.productId
							})
							break
						default:
							api = iotProductSeriesUserApi.listSeries({
								userId: this.userId,
								productId: this.productId
							})
					}
					api.then((res) => {
						const {
							data
						} = res
						if (data) {
							this.handleProductSeriesList(data)
							resolve()
						}
					})
				})
			},
			makeProductAndSeriesNameList() {
				const productNameList = []
				this.productList.forEach(item => {
					productNameList.push(item.name)
				})
				const productSeriesNameList = []
				this.productSeriesList.forEach(item => {
					productSeriesNameList.push(item.name)
				})
				this.productAndSeriesNameList = [productNameList, productSeriesNameList]
			},
			productAndSeriesColumnchange(e) {
				// console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				const column = e.detail.column
				const value = e.detail.value
				switch (column) {
					case 0: //拖动第1列
						if (value != 0) {
							this.productId = this.productList[value].productId
							this.listSeries().then((res) => {
								this.productAndSeriesIndex = [value, 0]
							})
						} else {
							this.productAndSeriesIndex = [0, 0]
						}
						break;
					case 1:
						this.productAndSeriesIndex = [this.productAndSeriesIndex[0], value]
						break
					default:
						break;
				}
				this.$forceUpdate()
			},
			productAndSeriesChange(e) {
				const index = e.detail.value
				this.productAndSeriesIndex = index
				this.productId = this.productList[index[0]].productId
				this.seriesId = this.productSeriesList[index[1]].seriesId
				this.currentPage = 1
				this.deviceList = []
				this.listDevice()
			},
			handleProductSeriesList(data) {
				this.productSeriesList = listProductSeries(this, data)
				this.makeProductAndSeriesNameList()
			},
			deviceNavigation(item) {
				const component = storage.getDeviceNavigationComponent()
				uni.navigateTo({
					url: `/pages/deviceNavigation/deviceNavigation?deviceName=${item.deviceName}&deviceCore=${item.deviceCore}&component=${component}`
				})
			},
			deviceSetting(item) {
				uni.navigateTo({
					url: `/pages/deviceNavigation/deviceNavigation?deviceName=${item.deviceName}&deviceCore=${item.deviceCore}&component=deviceSetting`
				})
			},
			formatStatusIndex(index) {
				return this.statusList[index]
			},
			listDevice() {
				deviceBelongApi.listDevice({
					groupId: this.groupId,
					status: this.statusList[this.statusIndex].value,
					productId: this.productId,
					seriesId: this.seriesId
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						this.deviceList = data
					}
				})
			},
		}
	}
</script>

<style>

</style>
